<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #eee;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        margin: 100px auto;
        /*
        变形就是通过css改变元素的形状或位置
        变形不会影响页面的布局
            translateX 沿着x轴方向平移
            translateY 沿着y轴方向平移
            translateZ 沿着z轴方向平移
            translate(x,y) 沿着x和y轴方向平移
            rotate(deg) 旋转
            scale(x,y) 缩放

        */
        transform: translateY(100px);
    }
    .box2{

    }
    .box3{
        /*width: 100px;
        height: 100px;*/
        background-color: orange;
        position: absolute;
        /*这种方式只能用于元素的大小确定的情况*/
        /*top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;*/
        left: 50%;
        transform: translate(-50%,-50%);
        top: 50%;
    }
    .box4,.box5{
        width: 220px;
        height: 300px;
        background-color: #fff;
        float: left;
        margin: 0 10px;
        transition: transform .3s;
    }
    .box4:hover,.box5:hover{
        transform: translate(0,-5px);
        box-shadow: 0 0 10px rgba(0,0,0,.5);
    }
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
